<template>
  <a-spin :spinning="data.tableLoading">
    <a-card :bordered="false">
      <a-steps :current="data.current"
        :items="steps">



      </a-steps>


      <br />

      <a-app v-if="data.current === 0">
        <a-form ref="formRef"
          :model="data.form"
          :rules="data.rules"
          :label-col="{ span: 6 }">
          <a-row>
            <a-col :span="6">
              <a-form-item label="创建日期从"
                name="reqDate">
                <a-date-picker show-time
                  valueFormat="YYYY-MM-DD HH:mm:ss"
                  v-model:value="data.form.reqDateFr" />
              </a-form-item>
              <a-form-item label="创建日期到"
                name="reqDate">
                <a-date-picker show-time
                  valueFormat="YYYY-MM-DD HH:mm:ss"
                  v-model:value="data.form.reqDateTo" />
              </a-form-item>
              <a-form-item label="部门"
                name="deptId">
                <DepartmentTreeSelect v-model:value="data.form.deptId"
                  @update:value="change" />
              </a-form-item>
              <a-form-item label="合并规划"
                name="merge">
                <a-checkbox v-model:checked="data.form.merge"></a-checkbox>
              </a-form-item>
            </a-col>
            <a-col :span="6"></a-col>
            <a-col :span="8"></a-col>
          </a-row>

          <a-divider />

          <a-row justify="end">
            <a-button-group>
              <a-button type="primary"
                @click="onConform()">
                <template #icon>
                  <SearchOutlined />
                </template>
                下一步
              </a-button>
              <a-button @click="resetQuery">
                <template #icon>
                  <ReloadOutlined />
                </template>
                重置
              </a-button>
            </a-button-group>
          </a-row>
        </a-form>
      </a-app>
      <a-app v-if="data.current === 1">
        <a-table :scroll="{ x: 600, y: 600 }"
          style="width: 100%"
          :dataSource="data.pageb.lista"
          :columns="columns"
          :row-key="id => { return id.id + '' + id.lineNum }"
          :loading="tableLoading"
          :pagination="{
            showSizeChanger: true,
            defaultPageSize: 20,
            showQuickJumper: true,
          }"
          :row-selection="{ selectedRowKeys: data.selectedRowKeys, onChange: onSelectChange }">
          <template #bodyCell="{ text, record, column }">
            <template v-if="column.dataIndex === 'qty'">
              <span>{{ excute(text) }}</span>
            </template>
          </template>
        </a-table>
        <a-row justify="end">
          <a-button-group>
            <a-button type="primary"
              @click="onBreakDown()">
              <template #icon>
                <SearchOutlined />
              </template>
              确认
            </a-button>
            <a-button @click="onLast">
              <template #icon>
                <ReloadOutlined />
              </template>
              上一步
            </a-button>
          </a-button-group>
        </a-row>
      </a-app>
      <a-app v-if="data.current === 2">
        <a-result status="success"
          title="执行成功！">
          <template #extra>
            <a-button @click="res => data.current = 0">返回首页</a-button>
            <a-button @click="showForm">查看BIP运算单{{ data.form.id }}</a-button>
          </template>
        </a-result>


        
      </a-app>
    </a-card>
  </a-spin>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue';

import { SmartLoading } from '/src/components/framework/smart-loading';
import { saordApi } from '/src/api/business/erp/saord-api';
import { PAGE_SIZE_OPTIONS } from '/src/constants/common-const';
import { smartSentry } from '/src/lib/smart-sentry';
import TableOperator from '/src/components/support/table-operator/index.vue';
import { useRouter } from 'vue-router';
import { PROVINCE_CITY_DISTRICT } from '/src/components/framework/area-cascader/province-city-district.js';
import { excute } from '/src/utils/numformat-util.js';
import DepartmentTreeSelect from '/src/components/system/department-tree-select/index.vue';
import VendTreeSelect from '/src/components/business/erp/vend-select/index.vue';
import { prpordApi } from '/@/api/business/erp/prpord-api.js';

const router = useRouter();

const data = reactive({
  form: {
    id: null,
    edit: true,
    reqDateFr: null,
    reqDateTo: null,
    deptId: null,
    deptName: null,
    merge: false,
  },
  pageb: {
    lista: [],
  },
  current: 0,
  selectedRowKeys: [],
  selectedRows: [],
  tableLoading: false,
});

// ---------------------------- 表格列 ----------------------------

const steps = [
  {
    title: '查询参数',
  },
  {
    title: '未执行生产计划',
  },
  {
    title: '执行结果',
  },
];

const columns = ref([
  {
    title: '电键',
    dataIndex: 'id',
    width: 100,
    align: 'center',
  },

  {
    title: '行号',
    dataIndex: 'lineNum',
    width: 100,
    align: 'center',
  },

  {
    title: '单据状态',
    dataIndex: 'docStatus',
    width: 100,
    align: 'center',
  },


  {
    title: '物料编码',
    dataIndex: 'itemId',
    width: 120,
    align: 'center',
    ellipsis: true,
  },

  {
    title: '物料名称',
    dataIndex: 'itemName',
    width: 200,
    align: 'center',
    ellipsis: true,
  },
  {
    title: '数量',
    dataIndex: 'qty',
    width: 120,
    align: 'center',
  },
  {
    title: '审核',
    dataIndex: 'approved',
    width: 100,
    align: 'center',
  },
  {
    title: '部门名称',
    dataIndex: 'deptName',
    width: 250,
    align: 'left',
  },
  {
    title: '合同号',
    dataIndex: 'connum',
    width: 250,
    align: 'left',
  },
  {
    title: '需求日期',
    dataIndex: 'reqDate',
    width: 250,
    align: 'center',
  },
  {
    title: '创建者',
    dataIndex: 'createBy',
    width: 160,
    align: 'center',
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    width: 160,
    align: 'center',
  },

  {
    title: '备注',
    dataIndex: 'remark',
    width: 160,
    align: 'left',
    resizable: true,
    ellipsis: true,
  },
]);

// ---------------------------- 查询数据表单和方法 ----------------------------

const queryFormState = {
  id: undefined,
  pageNum: 1,
  pageSize: 10,
};
// 查询表单form
const queryForm = reactive({ ...queryFormState });
// 表格加载loading
const tableLoading = ref(false);
// 表格数据
const tableData = ref([]);
// 总数
const total = ref(0);

// 重置查询条件
function resetQuery() {
  let pageSize = queryForm.pageSize;
  Object.assign(queryForm, queryFormState);
  queryForm.pageSize = pageSize;
  queryData();
}

// 搜索
function onSearch() {
  queryForm.pageNum = 1;
  queryData();
}

// 查询数据
async function queryData() {
  tableLoading.value = true;
  try {
    let queryResult = await saordApi.queryPage(queryForm);
    tableData.value = queryResult.data.list;
    total.value = queryResult.data.total;
  } catch (e) {
    smartSentry.captureError(e);
  } finally {
    tableLoading.value = false;
  }
}



// ---------------------------- 添加/修改 ----------------------------
const formRef = ref();

function showForm() {
  router.push({ path: 'biporda', query: { type: 'info', id: data.form.id } });
}

function onSelectChange(keyArray, selectRows) {
  data.selectedRowKeys = keyArray;
  data.selectedRows = selectRows;
}

function onLast() {
  data.current = 0;
}


function onBreakDown() {
  data.tableLoading = true;
  prpordApi
    .breakDown(data.selectedRows)
    .then((res) => {
      data.current = 2;
      data.form.id = res.data;
    })
    .finally(() => {
      data.tableLoading = false;
    });
}


function onConform() {

  data.tableLoading = true;
  prpordApi
    .queryPageUnexecut(queryForm)
    .then((res) => {
      data.pageb.lista = res.data.list;
      data.current = 1;
    })
    .finally(() => {
      data.tableLoading = false;
    });
}

function change(item, key) {
  data.form.deptName = key;
}
</script>
